<template>
  <div>
    <el-container>
      <div class="topAddress">
        <div style="display: flex; align-items: center">
          <p class="df" style="font-size: 14px">
            <span style="font-weight: bold; color: #333333"> 城市： </span>
            <span class="ml20">
              <a href="http://anhui.51zhaobiao.com.cn" class="c3">安徽</a>
            </span>
            <span class="ml20">
              <a href="http://beijing.51zhaobiao.com.cn" class="c3">北京</a>
            </span>
            <span class="ml20">
              <a href="http://shanghai.51zhaobiao.com.cn" class="c3">上海</a>
            </span>
            <span class="ml20">
              <a href="http://guangdong.51zhaobiao.com.cn" class="c3">广东</a>
            </span>
            <span class="ml20">
              <a href="http://shenzhen.51zhaobiao.com.cn" class="c3">深圳</a>
            </span>
            <!-- <span><a href="">sx</a></span> -->
            <!-- <span class="ml20">
              <div class="container">
                更多 >>>
                <div class="box"></div>
              </div>
            </span> -->
            <span class="ml20">
              <a-popover title="">
                <template #content>
                  <div>
                    <span class="ul">华北</span>
                    <span class="li">
                      <a href="">北京</a>
                    </span>
                    <span class="li">
                      <a href="">天津</a>
                    </span>
                    <span class="li">
                      <a href="">河北</a>
                    </span>
                    <span class="li">
                      <a href="">山西</a>
                    </span>
                    <span class="li">
                      <a href="">内蒙古</a>
                    </span>
                  </div>
                  <div>
                    <span class="ul">华东</span>
                    <span class="li">
                      <a href="">安徽</a>
                    </span>
                    <span class="li">
                      <a href="">上海</a>
                    </span>
                    <span class="li">
                      <a href="">江苏</a>
                    </span>
                    <span class="li">
                      <a href="">山东</a>
                    </span>
                    <span class="li">
                      <a href="">浙江</a>
                    </span>
                    <span class="li">
                      <a href="">福建</a>
                    </span>
                    <span class="li">
                      <a href="">江西</a>
                    </span>
                    <span class="li">
                      <a href="">台湾</a>
                    </span>
                  </div>
                  <div>
                    <span class="ul">华中</span>
                    <span class="li">
                      <a href="">湖北</a>
                    </span>
                    <span class="li">
                      <a href="">河南</a>
                    </span>
                    <span class="li">
                      <a href="">湖南</a>
                    </span>
                  </div>
                  <div>
                    <span class="ul">华南</span>
                    <span class="li">
                      <a href="">广东</a>
                    </span>
                    <span class="li">
                      <a href="">广西</a>
                    </span>
                    <span class="li">
                      <a href="">海南</a>
                    </span>
                    <span class="li">
                      <a href="">香港</a>
                    </span>
                    <span class="li">
                      <a href="">澳门</a>
                    </span>
                  </div>
                  <div>
                    <span class="ul">东北</span>
                    <span class="li">
                      <a href="">辽宁</a>
                    </span>
                    <span class="li">
                      <a href="">吉林</a>
                    </span>
                    <span class="li">
                      <a href="">黑龙江</a>
                    </span>
                  </div>
                  <div>
                    <span class="ul">西北</span>
                    <span class="li">
                      <a href="">陕西</a>
                    </span>
                    <span class="li">
                      <a href="">甘肃</a>
                    </span>
                    <span class="li">
                      <a href="">宁夏</a>
                    </span>
                    <span class="li">
                      <a href="">青海</a>
                    </span>
                    <span class="li">
                      <a href="">新疆</a>
                    </span>
                  </div>
                  <div>
                    <span class="ul">西南</span>
                    <span class="li">
                      <a href="">重庆</a>
                    </span>
                    <span class="li">
                      <a href="">四川</a>
                    </span>
                    <span class="li">
                      <a href="">贵州</a>
                    </span>
                    <span class="li">
                      <a href="">云南</a>
                    </span>
                    <span class="li">
                      <a href="">西藏</a>
                    </span>
                  </div>
                </template>
                <div>更多>>></div>
              </a-popover>
            </span>
          </p>
        </div>

        <!-- 登录注册 -->
        <div class="df">
          <img
            src="../assets/img/组 5090@2x.png"
            style="
              width: 75px;
              height: 40px;
              margin-right: 20px;
              margin-top: 3px;
            "
            v-if="vip"
          />
          <img
            @click="ToVip"
            src="../assets/img/vipw.png"
            style="
              width: 72px;
              height: 24px;
              margin-right: 20px;
              cursor: pointer;
            "
            v-if="vipw"
          />
          <img
            src="../assets/img/vipbz.png"
            style="width: 100px; height: 30px; margin-right: 20px"
            v-if="vip"
          />
          <img
            src="../assets/img/user.png"
            style="width: 36px; height: 36px; margin-right: 10px"
            v-if="vip"
          />
          <p v-if="vip" style="margin-top: 18px">
            {{ userName }}
          </p>
          <img
            src="../assets/img/xia.png"
            style="width: 12px; height: 8px; margin-left: 6px"
            v-if="vip"
          />
          <el-button
            style="background: #5360d0; color: #fff"
            @click="login()"
            v-if="userLogin"
          >
            登录/注册
          </el-button>
        </div>
      </div>
      <!-- 线 -->
      <div style="height: 1px; border-bottom: 1px solid #dddd"></div>
      <!-- 线 -->
      <el-header>
        <span class="LOGO">
          <img src="../assets/img/Logo.png" style="width: 100%; height: 100%" />
        </span>
        <el-menu
          :default-active="0"
          class="el-menu-demo"
          mode="horizontal"
          @select="handleSelect"
          :ellipsis="false"
          router
        >
          <el-menu-item index="/">
            <img src="../assets/img/home.png" class="iconimg" />
            <span class="ml4">首页</span>
          </el-menu-item>
          <el-menu-item index="/search">
            <img src="../assets/img/路径 33@2x.png" class="iconimg" />
            <span class="ml4">搜索</span>
          </el-menu-item>
          <el-menu-item index="/staging">
            <img src="../assets/img/路径 4087@2x.png" class="iconimg" />
            <span class="ml4">工作台</span>
          </el-menu-item>
          <el-sub-menu index="2">
            <template #title>
              <img src="../assets/img/组 5037@2x.png" class="iconimg" />
              <span class="ml4">市场洞察</span>
            </template>
            <el-menu-item index="/productanalysis">产品分析</el-menu-item>
            <el-menu-item index="/companyanalysis">企业分析</el-menu-item>
          </el-sub-menu>

          <el-sub-menu index="3">
            <template #title>
              <img src="../assets/img/组 5040@2x.png" class="iconimg" />
              <span class="ml4">行业解决方案</span>
            </template>
            <el-menu-item index="/medical">医疗行业</el-menu-item>
          </el-sub-menu>

          <el-sub-menu index="4">
            <template #title>
              <img src="../assets/img/组 5041@2x.png" class="iconimg" />
              <span class="ml4">数据服务</span>
            </template>

            <el-menu-item index="/dataservice">数据导出平台</el-menu-item>
            <el-menu-item index="/register">数据开放 平台</el-menu-item>
          </el-sub-menu>

          <el-menu-item index="/staging">
            <img src="../assets/img/路径 4179@2x.png" class="iconimg" />
            <span class="ml4">标讯头条</span></el-menu-item
          >
        </el-menu>
      </el-header>

      <!-- 登录弹框 -->
      <Dialog :isShowDrawer="isShowDrawer" @close-drawer="closeDrawer" />

      <el-main>
        <router-view></router-view>
      </el-main>

      <el-footer>{{ vipw }}</el-footer>
    </el-container>
  </div>
</template>

<script lang="ts" setup>
import { ref, reactive } from "vue";
import { useCounterStore } from "../pain/login/login";
import { storeToRefs } from "pinia";
import Dialog from "../components/login/index.vue";
import "../assets/com/com.scss";
import { fa } from "element-plus/es/locale";
import router from "../router";

const handleSelect = (key: string, keyPath: string[]) => {
  console.log(key, keyPath);
};
const store = useCounterStore();
const login = () => {
  isShowDrawer.value = true;
  // console.log(isShowDrawer.value);
};
// 弹框
const isShowDrawer = ref(false);

// 关闭弹窗
function closeDrawer() {
  isShowDrawer.value = false;
  // console.log(isShowDrawer.value);
}

// pinia
const { vipw } = storeToRefs(store);
const { vip } = storeToRefs(store);
const { userLogin } = storeToRefs(store);
const { userName } = storeToRefs(store);

const ToVip = () => {
  console.log(1);
  router.push("/memberPayment");
};
</script>
<style>
.el-dialog__body {
  padding: 0 !important;
}

/* tabs */
.deleteBorder .el-tabs__nav-wrap::after {
  height: 0 !important;
}

.deleteBorder .el-tabs__active-bar {
  background: transparent !important;
}

.el-menu--horizontal.el-menu {
  border-bottom: none !important;
}
</style>
<style lang="scss" scoped>
:deep(.el-menu-item:hover) {
  background-color: #e6e9ff !important;
  border-top: 5px solid #6675ff;
  color: #000 !important;
}

:deep(.el-menu-item.is-active) {
  background-color: #e6e9ff !important;
  border-bottom: 0 !important;
  color: #fff;

  span {
    color: #000 !important;
  }
}

:deep(.el-menu--horizontal > .el-sub-menu:hover .el-sub-menu__title) {
  color: #000 !important;
}

.topAddress {
  width: 1200px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 0 auto;
  // margin-left: 380px;
}

.LOGO {
  line-height: 60px;
  width: 126px;
  height: 32px;
  text-align: center;
  margin-right: 50px;
}

.el-header {
  width: 1200px;
  height: 60px;
  color: #333;
  margin: 0 auto;
  display: flex;
  // margin-left: 360px;
  padding: 0;
}

.LoGoTop {
  width: 150px;
  height: 50px;
  background-color: #818181;
  border: 0;
  color: #fff;
  margin-top: 10px;
  margin-left: 20px;
}

.xx {
  width: 100%;
  height: 1px;
  border-bottom: 1px dotted #000;
}

// title内容
.title {
  font-size: 14px;
  font-weight: 400;
  color: #a9b1be;
  margin-bottom: 50px;
}

// 手机号
.phone {
  display: flex;
  align-items: center;

  .tel {
    width: 56px;
    height: 14px;
    font-size: 14px;
    font-weight: 400;
    color: #333333;
  }
}

// 输入框
.input_shuru {
  width: 420px;
  margin-top: 20px;
  border-top: 0;
  border-right: 0;
  border-left: 0;
  border-bottom: 1px solid #a9b1be;
  outline: none;
  font-size: 16px;
  padding-bottom: 10px;
}

input::-webkit-input-placeholder {
  color: #a9b1be;
}

// 验证码
.poDing {
  position: relative;
}

.inp_yzm {
  color: #6675ff;
  position: absolute;
  right: 40px;
  top: 20px;
  cursor: pointer;
}

// 登录注册
.login_register {
  width: 420px;
  height: 50px;
  background: #6675ff;
  opacity: 1;
  border-radius: 4px;
  margin-top: 40px;
  margin-bottom: 50px;
}

.el-main {
  background-color: #f6f6f6;
  color: #333;
  // text-align: center;
  height: 80vh;
  padding: 0;
  box-sizing: border-box;
}

.el-footer {
  background-color: #b0adad;
  color: #333;
  text-align: center;
}

// 更多>>>
.ul {
  color: #fff;
  background-color: #00a7f2;
  width: 60px;
  height: 20px;
  line-height: 20px;
  text-align: center;
  margin: 10px;
  font-weight: bold;
  display: inline-block;
}
.li {
  margin: 0 15px;
  a {
    color: #000;
  }
  a:hover {
    color: RED;
  }
}
</style>
